.eventInfo {
  background-color: @oc-white;
  border: 1px solid @oc-gray-2;
  padding: 15px;
  border-radius: 15px;
}

.title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid @oc-gray-2;
  font-family: Monaco, monospace;
  font-size: 12px;
}

.kbd {
  background-color: @oc-gray-9;
  color: @oc-white;
  padding: 3px 5px;
  line-height: 1;
  font-size: 12px;
  border-radius: 5px;
  font-family: Monaco, monospace;
}

.boolean {
  color: @oc-green-7;

  &.false {
    color: @oc-red-7;
  }
}

.deprecation {
  color: @oc-gray-6;
}

.space {
  color: @oc-gray-6;
}

.dark {
  background-color: @oc-gray-9;
  border-color: @oc-gray-9;
  color: @oc-gray-4;

  .kbd {
    background-color: @oc-gray-7;
  }

  .title {
    color: @oc-gray-3;
    border-bottom-color: @oc-gray-7;
  }

  .deprecation {
    color: @oc-gray-5;
  }

  .boolean {
    color: @oc-green-4;

    &.false {
      color: @oc-red-4;
    }
  }
}
